<template>
    <div class="card">
        <el-card height="220px;" class="card-container">
            <img
                    class="white--text"
                    height="151px"
                    style="text-align:center;width: 100%;"
                    src="../../../static/img/loginHeader.jpg">
            <div class="modelData-info">
                <div class="modelData-info-container">
                    <!--<div class="modelData-name">{{card.artifactId}}</div>-->
                    <div class="modelData-describe" style="width: 180px;text-align: left;padding-top: 18px"
                         :title=personalCard.name>{{personalCard.name}}
                    </div>
                    <div class="modelData-key">
                        <!--<el-tag v-for="tag in keywords" :key="tag" size="mini" style="margin-left: 2px">{{tag}}-->
                        <!--</el-tag>-->{{personalCard.description}}
                    </div>
                </div>
                <div class="modelData-option">
                    <div class="modelData-icon" id="info" title="数据集信息" @click="viewDatasetInfo(personalCard.id)">
                        <i class="fa fa-info-circle" aria-hidden="true"></i>
                    </div>
                    <div class="modelData-icon" id="previewIcon" title="数据集预览" @click="previewDataset(personalCard.id)">
                        <i class="fa fa-table" aria-hidden="true"></i>
                    </div>
                    <div class="modelData-icon" id="visIcon" title="瓦片服务" @click=" VisualizedModel(personalCard.id)">
                        <i class="fa fa-globe" aria-hidden="true"></i>
                    </div>
                    <div class="modelData-icon" id="deleteIcon" title="删除数据集" @click="deleteModel(personalCard.id)">
                        <i class="fa fa-trash" aria-hidden="true"></i>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "modelCard",
        data() {
            return {
                // modelSelect:false
            }
        },
        computed: {},
        props: {
            personalCard: {
                type: Object,
                default: function () {
                    return {}
                }
            }
        },

        methods: {
            VisualizedModel(id) {
                // let url = this.$URL.datasetPreviewUrl + id;
                let modelData = {visible: true,id:id};
                this.$Bus.$emit('personalDataMapService', modelData);
            },
            previewDataset(id) {
                // let url="http://192.168.1.5:9100/dbfg/attQuery/view/d8a1095c-33b1-4c96-bd19-a87c746eabd6?pageSize=8&pageNo=1";
                let url = this.$URL.datasetPreviewUrl + id;
                let modelData = {url: url, visible: true};
                this.$Bus.$emit('personalDatapreview', modelData);

            },
            viewDatasetInfo(id) {
                let url = this.$URL.datasetDetailUrl + id;
                let modelData = {url: url, visible: true};
                this.$Bus.$emit('personalDataInfo', modelData);
            },
            deleteModel(id) {
                let that = this;
                this.$confirm('是否删除该数据？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // let url = 'http://192.168.1.5:9000/dbfg/parallel/unregister/' + id;
                    this.$axios.delete1(that.$URL.datasetDeleteUrl + id + "/delete").then(res => {
                        if (res.code === 200) {
                            that.$message({
                                type: 'success',
                                message: '删除数据成功！'
                            });
                            that.$emit('getPersonal');
                        } else {
                            that.$message({
                                type: 'warning',
                                message: res.message
                            })
                        }
                    }).catch(function (error) {
                        console.log(error);
                        that.$message.error('删除数据集失败！')
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },
        created() {
            let that = this;
            // this.$Bus.$on('modelSelect',res =>{
            //     if(res !== undefined){
            //         that.modelSelect = res;
            //     }
            // })
        }
    }
</script>

<style>
    .el-card__body {
        padding: 0;
    }

    .card {
        margin-left: 25px;
        /*padding: 5px 10px 5px 10px;*/
        width: 240px;
    }

    .card-container {
        /*margin-left: 25px;*/
        /*!*padding: 5px 10px 5px 10px;*!*/
        /*width: 260px;*/
    }

    .card:hover {
        box-shadow: 0 0 10px 1px rgba(0, 0, 0, .1);
    }

    .modelData-info {
        height: 69px;
        /*padding: 8px 12px 0;*/
        padding: 0 12px 0;
        overflow: hidden;
        color: #303c46;
        position: relative;
    }

    .modelData-info-container {
        height: 100%;
        overflow: hidden;
        position: relative;
    }

    .modelData-name {
        white-space: nowrap;
        text-overflow: ellipsis;
        height: 24px;
        text-align: left;
        font-size: 14px;
        line-height: 22px;
        position: relative;
        margin-right: 102px;
    }

    .modelData-key {
        position: absolute;
        right: 2px;
        top: 21px;
        height: 14px;
        font-size: 12px;
        line-height: 20px;
        text-align: left;
        color: #8a9194;
    }

    .modelData-option {
        position: absolute;
        right: 10px;
        bottom: 3px;
    }

    .modelData-icon {
        margin: 0;
        border: 0;
        padding-right: 3px;
        font-size: 14px;
        box-sizing: border-box;
        position: relative;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: inline-flex;
        cursor: pointer;
    }

    .modelData-icon i:hover {
        color: #3f87f7;
        cursor: pointer;
    }

    /*#delete i:hover {*/
    /*color: #fe6970;*/
    /*}*/

    .data-option-container {
        position: absolute;
        z-index: 9;
        width: 118px;
        background-color: #fff;
        border-radius: 3px;
        bottom: 30px;
        right: -20px;
        border: 1px solid #d4d8db;
        text-align: left;
        color: #8a9194;
        padding: 6px 0;
    }

    .option-icon {
        width: 18px;
        text-align: center;
        float: left;
        margin-right: 6px;
    }
</style>